<template>
	<div class="layout-padding">
		<div class="relative escape" ref="domRef">
			<!-- <MapArea class="absolute w-full h-full z-99" /> -->
			<div class="escape_top">
				<el-tooltip :content="t('tagsView.fullscreen')" placement="top">
					<el-button
						type="info"
						style="pointer-events: all"
						@click="toggleFullScreen"
						v-if="!isFullscreen"
						class="escape_top_fullScreen"
						icon="FullScreen"
						link
					></el-button>
				</el-tooltip>
				<div class="escape_top_title">{{ t('analysis.webTitle') }}</div>
				<div class="flex items-center escape_top_date">
					<el-icon class="mr-1"><Clock /></el-icon>{{ formatDate(date, 'YYYY-mm-dd HH:MM:SS') }}
				</div>
			</div>
			<div class="relative w-full escape_content">
				<div class="absolute w-full h-full">
					<el-row :gutter="4" style="height: 100%">
						<!-- 左 -->
						<el-col :span="6" style="height: 100%">
							<div class="escape_content_flex">
								<div class="flex flex-col overflow-hidden escape_content_flex_item">
									<div class="flex flex-col h-full py-1 overflow-hidden px1">
										<div class="flex items-center">
											<img :src="UseTypeGif" alt="" class="min-h-[108px] h-[108px]" />
											<div class="flex-1 w-full h-[108px] device-bg flex justify-center flex-col text-[#3ecafc] px-2">
												<div class="flex mb-4">
													<div class="flex justify-between flex-1 px-2">
														<span>{{ t('analysis.installed') }}</span>
														<span class="font-semibold text-[16px]">{{ deviceInfo?.placeRoomCount }}</span>
													</div>
													<div class="flex justify-between flex-1 px-2">
														<span>{{ t('analysis.onLine') }}</span>
														<span class="font-semibold text-[16px]">{{ deviceInfo?.deviceOnlineCount }}</span>
													</div>
												</div>
												<div class="flex">
													<div class="flex justify-between flex-1 px-2">
														<span>{{ t('analysis.subordinateUnit') }}</span>
														<span class="font-semibold text-[16px]">{{ deviceInfo?.lowerDeptCount }}</span>
													</div>
													<div class="flex justify-between flex-1 px-2">
														<span>{{ t('analysis.offLine') }}</span>
														<span class="font-semibold text-[16px]">{{ deviceInfo?.deviceOfflineCount }}</span>
													</div>
												</div>
											</div>
										</div>
										<div class="text-[#3ecafc] px-4 text-[18px]">{{ t('analysis.healthIndex') }}</div>
										<div class="relative flex-1 overflow-hidden">
											<deviceHealth :deviceNormalCount="deviceInfo.deviceNormalCount" :deviceFaultCount="deviceInfo.deviceFaultCount" />
											<div class="w-full h-full absolute top-0 left-0 z-[9]">
												<div class="flex items-center justify-center w-full h-full">
													<img :src="graphicImage" alt="" class="w-2/5" />
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="item_bg h-[calc(33.33%-11px)] min-h-[calc(33.33%-11px)] mt-4" style="pointer-events: all">
									<div class="flex flex-col h-full">
										<!-- <div class="py-2 pl-2 font-semibold text-center">各分组报警统计</div> -->
										<deviceStatus />
									</div>
								</div>
							</div>
						</el-col>
						<!-- 中 -->
						<el-col :span="12" style="height: 100%">
							<div class="escape_content_flex">
								<div class="flex-1 pt-4">
									<MapArea class="w-full h-full" />
								</div>
								<div class="item_bg h-[calc(33.33%-11px)] min-h-[calc(33.33%-11px)] mt-4 flex" style="pointer-events: all">
									<alarmType class="flex-1 pr-2" />
									<deviceRatio class="flex-1" />
								</div>
							</div>
						</el-col>
						<!-- 右 -->
						<el-col :span="6" style="height: 100%">
							<div class="escape_content_flex" style="pointer-events: all">
								<div class="flex flex-col overflow-hidden escape_content_flex_item">
									<!-- <div class="py-2 pl-2 font-semibold text-center">报警故障</div> -->
									<div class="flex flex-col h-full px-1 py-1 overflow-hidden">
										<el-row :gutter="20">
											<el-col :span="24" class="mb-2">
												<div class="flex items-center justify-around w-full">
													<img :src="AlarmGif" class="max-h-[108px] max-w-[108px]" alt="" />
													<img :src="FaultGif" class="h-[108px] w-[108px]" alt="" />
												</div>
											</el-col>
											<el-col :span="24">
												<div class="flex items-start justify-between text-lg">
													<div>
														<div>{{ t('analysis.todayAlarm') }}</div>
														<div class="text-[#e83b03]">
															<span class="text-xl font-semibold">{{ todayInfo?.todayAlarmNum || 0 }}</span>
															<span class="pl-1 text-xs">{{ t('analysis.times') }}</span>
														</div>
													</div>
													<div>
														<div>{{ t('analysis.disposed') }} ({{ todayInfo?.todayAlarmHandledPer || '0%' }})</div>
														<div class="text-[#e83b03]">
															<span class="text-xl font-semibold">{{ todayInfo?.todayAlarmHandledNum || 0 }}</span>
															<span class="pl-1 text-xs">{{ t('analysis.times') }}</span>
														</div>
													</div>
													<div>
														<div>{{ t('analysis.todayFault') }}</div>
														<div class="text-[#ff9424]">
															<span class="text-xl font-semibold">{{ todayInfo?.todayFaultNum || 0 }}</span>
															<span class="pl-1 text-xs">{{ t('analysis.times') }}</span>
														</div>
													</div>
													<div>
														<div>{{ t('analysis.disposed') }} ({{ todayInfo?.todayFaultHandledPer || '0%' }})</div>
														<div class="text-[#ff9424]">
															<span class="text-xl font-semibold">{{ todayInfo?.todayFaultHandledNum || 0 }}</span>
															<span class="pl-1 text-xs">{{ t('analysis.times') }}</span>
														</div>
													</div>
												</div>
											</el-col>
										</el-row>
										<div class="flex text-[#3ecafc] text-lg pt-3 pb-1">
											<div class="flex-1">{{ t('analysis.undisposed') }} {{ t('analysis.alarm') }}</div>
											<div class="flex-1">{{ t('analysis.undisposed') }} {{ t('analysis.fault') }}</div>
										</div>
										<div class="flex-1 overflow-hidden">
											<div class="flex h-full text-xs text-[#3ecafc]">
												<div class="w-1/2 h-full overflow-hidden">
													<el-scrollbar>
														<div
															v-for="item in dataList.alarm"
															:key="item"
															class="mb-1 p-1 w-full truncate overflow-hidden cursor-pointer hover:bg-[rgba(95,164,245,0.2)] hover:text-[#b3dcec]"
															@click="handleAlarm(item)"
														>
															<el-icon class="mr-1"><MapLocation /></el-icon>{{ item.address }}
														</div>
													</el-scrollbar>
												</div>
												<div class="w-1/2">
													<el-scrollbar>
														<div
															v-for="item in dataList.fault"
															:key="item"
															class="mb-1 p-1 w-full truncate overflow-hidden cursor-pointer hover:bg-[rgba(95,164,245,0.2)] hover:text-[#b3dcec]"
															@click="handleFault(item)"
														>
															<el-icon class="mr-1"><MapLocation /></el-icon>{{ item.address }}
														</div>
													</el-scrollbar>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="item_bg h-[calc(33.33%-11px)] min-h-[calc(33.33%-11px)] mt-4" style="pointer-events: all">
									<div class="flex flex-col h-full">
										<devicePie :color="['#409EFF', '#909399', '#67C23A', '#e73a03']" />
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="flex items-center justify-center escape_bottom">
				<!-- <div> -->
				<el-icon size="12px"><OfficeBuilding /></el-icon>
				<div class="ml-1 text-info">{{ tenantName }}</div>
				<!-- </div> -->
			</div>
		</div>
	</div>
</template>

<script setup name="analysis" lang="ts">
import { useFullscreen, tryOnUnmounted } from '@vueuse/core';
import { formatDate } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';
import { useThemeConfig } from '/@/stores/themeConfig';
import alarmType from './components/alarmType.vue';
import deviceStatus from './components/deviceStatus.vue';
import devicePie from './components/devicePie.vue';
import deviceRatio from './components/deviceRatio.vue';
import deviceHealth from './components/deviceHealth.vue';
import MapArea from './components/AMap.vue';
import { getTodayAlarmAndFault, screenDevice, unprocessedAlarm, unprocessedFault } from '/@/api/analysis/index';
import AlarmGif from '/@/assets/analysis/red.gif';
import FaultGif from '/@/assets/analysis/yellow.gif';
import UseTypeGif from '/@/assets/analysis/use-type.gif';
import graphicImage from '/@/assets/analysis/health.png';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const router = useRouter();
const dataList = reactive({
	alarm: [] as any,
	fault: [] as any,
});
// 报警故障数据
const todayInfo = reactive({
	todayFaultHandledNum: '',
	todayFaultHandledPer: '',
	todayFaultNum: '',
	todayAlarmHandledNum: '',
	todayAlarmHandledPer: '',
	todayAlarmNum: '',
});
// 设备统计数据
const deviceInfo = reactive({
	lowerDeptCount: '0',
	placeRoomCount: '0',
	deviceOnlineCount: '0',
	deviceOfflineCount: '0',
	deviceNormalCount: '0',
	deviceFaultCount: '0',
});
// 未处理故障
const getAlarmList = () => {
	unprocessedAlarm().then((res) => {
		dataList.alarm = res.data;
	});
};
getAlarmList();
// 未处理报警
const getFaultList = () => {
	unprocessedFault().then((res) => {
		dataList.fault = res.data;
	});
};
getFaultList();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const domRef = ref();
const { toggle: toggleDom, isFullscreen } = useFullscreen(domRef);

const tenantName = computed(() => {
	return Session.getTenantName() || themeConfig.value.globalTitle;
});

const date = ref(new Date());
const timer_date = ref();
const timer_data = ref();
// 获取故障，报警当日统计
const getFaultAndAlarm = () => {
	getTodayAlarmAndFault().then((res) => {
		Object.assign(todayInfo, res.data);
	});
};
getFaultAndAlarm();
// 获取设备统计数据
const getDevice = () => {
	screenDevice().then((res) => {
		Object.assign(deviceInfo, res.data);
	});
};
const handleAlarm = (item: any) => {
	console.log('item: ', item);
	router.push({
		path: '/alarm/alarmLogging/index',
	});
};
const handleFault = (item: any) => {
	console.log('item: ', item);
	router.push({
		path: '/alarm/alarmFaultLogging/index',
	});
};
onMounted(() => {
	getDevice();
	timer_date.value = setInterval(() => {
		date.value = new Date();
	}, 1000);
});
function toggleFullScreen() {
	toggleDom();
}
tryOnUnmounted(() => {
	clearInterval(timer_date.value);
});
</script>
<style lang="scss" scoped>
div,
span {
	font-family: 'Microsoft YaHei', 'Times New Roman';
}
.escape {
	height: 100%;
	padding-bottom: 28px;
	width: 100%;
	background-image: url('/@/assets/bg/bgc.png');
	background-size: 100% 100%;
	&_content {
		height: calc(100% - 60px);
		&_flex {
			height: 100%;
			color: #fff;
			padding-left: 6px;
			padding-right: 6px;
			display: flex;
			flex-direction: column;
			.item_bg {
				// border: 1px solid #fff;
				// box-shadow: 0px 12px 32px 4px rgba(0, 0, 255, 0.1), 0px 8px 20px rgba(0, 0, 255, 0.1);
				// background-color: rgba(0, 0, 255, 0.08);
				border-radius: 4px;
			}
			&_item {
				flex: 1;
				pointer-events: all;
				// border: 1px solid #fff;
				border-radius: 4px;
				// background-color: rgba(0, 0, 255, 0.08);
				// box-shadow: 0px 12px 32px 4px rgba(0, 0, 255, 0.1), 0px 8px 20px rgba(0, 0, 255, 0.1);
			}
		}
	}
	&_top {
		height: 60px;
		width: 100%;
		background-image: url('/@/assets/bg/s-bgc2.png');
		background-size: 100% 100%;
		text-align: center;
		position: relative;
		&_title {
			font-size: 26px;
			font-weight: 600;
			letter-spacing: 2px;
			line-height: 60px;
			color: #fff;
			text-shadow: 0 0 0.2em #2caee4;
		}
		&_date {
			color: #d4d4d4;
			line-height: 30px;
			font-size: 12px;
			position: absolute;
			top: 0;
			right: 80px;
		}
		&_fullScreen {
			position: absolute;
			top: 6px;
			right: 10px;
		}
	}
	&_bottom {
		position: absolute;
		bottom: 0;
		width: 100%;
		// margin-top: 8px;
		height: 28px;
		// line-height: 20px;
		text-align: center;
		color: #fff;
		font-size: 12px;
		// background-image: url('/@/assets/bg/bottom-bg.png');
		// background-size: contain;
		// background-repeat: no-repeat;
	}
}
.device-bg {
	background-image: url('/@/assets/analysis/device-count-bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
</style>
